<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<s:action name="slideshow" namespace="/page">
	<s:param name="albumName"><c:out value="${param.albumName}" /></s:param>
</s:action>

<div id="slideshow" style="padding:4px 10px 8px 18px;
background-color: #3D8FE8;
position: relative; 
height:265px;
background-image:url('/images/sebCMS_slideshow_background.gif')">
	<div id="slot0" 
		style="float:left;
		height:265px;
		width:196px;
		margin-right:14px"
	><img height="100%" width="100%" src="<c:out value="${sebcms_slideshow.portraitSlides[0].imageHref}"/>" /></div>
	<div id="slot1" 
		style="float:left;
		width:350;
		height:265;
		margin-right:14px"
	><img height="100%" width="100%" src="<c:out value="${sebcms_slideshow.landscapeSlides[0].imageHref}"/>" /></div>
	<div style="float:left;
	height:265px"><div id="slot2" style="width:175px;height:129px;margin-bottom: 6px;"><img height="100%" width="100%" src="<c:out value="${sebcms_slideshow.landscapeSlides[1].imageHref}"/>" /></div><div id="slot3" style="width:175px;height:129px"><img height="100%" width="100%" src="<c:out value="${sebcms_slideshow.landscapeSlides[2].imageHref}"/>" /></div></div>
	<div id="slideshow_foot"
	style="clear:both;
		margin: 0 -10px 0 -18px;
		height:8px;
		vertical-align: bottom">
		<img src="/images/corner-cutter-bottom-left.gif" style="float:left;"/>
		<img src="/images/corner-cutter-bottom-right.gif" style="float:right;"/>
	</div>
</div>


<script type="text/javascript">
	// list of portraitImages. 
	var pImageList = new Array(); 
	<c:forEach items="${sebcms_slideshow.portraitSlides}" var="i" varStatus="status">
		pImageList[<c:out value="${status.index}" />] = "<c:out value="${i.imageHref}" />";</c:forEach>
	var pListSize = pImageList.length;
	var lImageList = new Array(); 
	<c:forEach items="${sebcms_slideshow.landscapeSlides}" var="i" varStatus="status">
	lImageList[<c:out value="${status.index}" />] = "<c:out value="${i.imageHref}" />";</c:forEach>
	var lListSize = lImageList.length;
	var portraitSlotList = [0];
	var landscapeSlotList = [1,2,3];
	var currentSlot = -1;
	var pImagePtr = 1;
	var lImagePtr = 3;

	function nextSlot(){
		currentSlot++;
		if( currentSlot == 4 ){
			currentSlot = 0;
		}
		return currentSlot;
	}

	function nextImage( isLandscape ){
		if( isLandscape ){
			lImagePtr++;
			//alert( "landscape: " + lImagePtr + " compare to size " + lListSize );
			if( lImagePtr == lListSize ){
				lImagePtr = 0;
			}
			//alert( "returning image[ "+lImagePtr+" ]: " + lImageList[ lImagePtr ] );
			return lImageList[ lImagePtr ];
		} else {
			pImagePtr++;
			//alert( "landscape: " + pImagePtr + " compare to size " + pListSize );
			if( pImagePtr == pListSize ){
				pImagePtr = 0;
			}
			//alert( "returning image: " + pImageList[ pImagePtr ] );
			return pImageList[ pImagePtr ];
		}
	}

	function rotateSlot(){
		var s = nextSlot();
		var h;
		if( s == 0 ){
			h = "<img src=\"" + nextImage( false ) + "\" height=\"100%\" width=\"100%\" />";
			document.getElementById( "slot" + s ).innerHTML = h;
		} else {
			h = "<img src=\"" + nextImage( true ) + "\" height=\"100%\" width=\"100%\" />";
			document.getElementById( "slot" + s ).innerHTML = h;
		}
		//alert( s + ": " + h );
		setTimeout("rotateSlot()", 5000);
	}

	rotateSlot();
</script>
